<template>
    <div class="audios">
        <scroll ref="scroll"
                class="audios-content"
                show-action
                shape="round"
                :data="items"
                :pullup="true"
                @scrollToEnd="scrollToEnd"
                :listenScroll="true"
                :isSetPlayerStatus="true"
                :probeType="2"
        >
            <div class="recommend-list">
                <ul>
                    <li @click="selectItem(item,$event)" v-for="item in items" v-lazy="item"
                        :class="{ active: currentAudio.id == item.id }">
                        <van-swipe-cell>
                            <div class="item">
                                <div class="icon">
                                    <img width="60" height="60" :src="item.logo">
                                </div>
                                <div class="text">
                                    <h2 class="name" v-html="item.title"></h2>
                                    <p class="desc" v-html="item.create_time"></p>
                                </div>
                                <div v-if="currentAudio.id == item.id" class="play-status">
                                    <van-icon name="pause-circle-o" v-if="isPlaying" size="30"/>
                                    <van-icon name="play-circle-o" v-else size="30"/>
                                </div>
                                <div v-show="item.is_collected" class="collected-icon">
                                    <van-icon name="star"/>
                                </div>
                            </div>
                            <template #right>
                                <div class="hidden-btn">
                                    <van-button plain color="#7232dd" size="small"
                                                @click.stop="onUploadHandle(item)">
                                        下载
                                    </van-button>
                                    <van-button type="default" text="取消收藏" size="small"
                                                @click.stop="onCollectHandle(item)" v-if="item.is_collected"/>
                                    <van-button type="primary" text="收藏" size="small"
                                                @click.stop="onCollectHandle(item)" v-else/>
                                </div>
                            </template>
                        </van-swipe-cell>
                    </li>
                </ul>
            </div>
        </scroll>
    </div>
</template>

<script>
    import Scroll from "@/components/scroll/scroll";
    import {downloadWithBlob} from "../../util/download-handle"
    import Vue from 'vue';
    import storage from 'good-storage'
    import {
        Icon
        , Toast
        , SwipeCell
        , Button
        , Lazyload
    } from 'vant';

    Vue.use(Icon)
        .use(Toast)
        .use(SwipeCell)
        .use(Button)
        .use(Lazyload, {
            lazyComponent: true,
        });
    // 缓存索引 - 下载记录
    var DLR = "downloadRecord";
    export default {
        name: "audios",
        props: {
            items: {
                default: [],
                type: Array
            }
        },
        data() {
            return {
                audios: []
            }
        },
        created() {
            // props 属性不可修改，所以传值给 data 利用
            this.audios = this.items;
        },
        // 一下属性被全局监听
        // 变动，列表数据跟随改变
        computed: {
            currentAudio() {
                return this.$store.state.currentAudio;
            },
            isPlaying() {
                return this.$store.state.isPlaying;
            },
            isCurrentItem() {
                return this.currentAudio.id == this.items
            },
        },
        methods: {
            // 选中
            selectItem(item, event) {
                if (!event._constructed) {
                    return;
                }
                if (this.currentAudio.id == item.id) {
                    // 再次选中，
                    var isPlaying = this.$store.state.isPlaying;
                    this.$store.commit("setPlayingStatus", !isPlaying);
                } else {
                    // 首次选中
                    this.$store.commit("setCurrentAudio", {
                        id: item.id,
                        title: item.title,
                        author: " ",
                        url: item.audio_oss_url,
                        pic: item.logo,
                        is_collected: item.is_collected
                    });
                }
            },
            // 滚动到底部
            scrollToEnd() {
                this.$emit('scrollToEnd');
            },
            // 收藏处理
            onCollectHandle(e) {
                var resource_id = e.id, that = this;
                this.$http.get("/user/collectHandle?resource_id=" + resource_id)
                    .then((response) => {
                        var rs = response.data, is_collected, audios = that.audios;
                        if (rs.code == 0) {
                            Toast.fail(rs.msg);
                            return false;
                        } else if (rs.code == 1) {
                            is_collected = 1;
                        } else if (rs.code == 2) {
                            is_collected = 0;
                        }
                        // 修改状态
                        for (var i = 0; i < audios.length; i++) {
                            if (resource_id === audios[i].id) {
                                audios[i].is_collected = is_collected
                            }
                        }
                        that.audios = audios;
                        Toast.success(rs.msg)
                    });
            },
            // 下载处理
            onUploadHandle(e) {
                var userInfo = JSON.parse(localStorage.getItem("userInfo")) || null;
                if (!userInfo) {
                    Toast.fail("请先登陆！");
                    return false;
                }
                if (!userInfo.is_vip) {
                    Toast.fail("成为 VIP 才可以下载！");
                    return false;
                }
                // 添加下载记录
                var downloadRecord = storage.get(DLR) || [];
                var len = downloadRecord.length;
                var isRecord = 0;
                if (len > 0) {
                    for (var i = 0; i < len; i++) {
                        if (e.id === downloadRecord[i].id) {
                            // 置顶
                            downloadRecord.unshift(downloadRecord.splice(i, 1)[0]);
                            isRecord = 1;
                        }
                    }
                }
                if (0 === len || 0 === isRecord) {
                    downloadRecord.unshift(e);
                }
                storage.set(DLR, downloadRecord);
                // 下载
                downloadWithBlob(e.audio_oss_url, e.title + ".mp3");
                Toast.success("开始下载");
            },

        },
        components: {
            Scroll,
        }
    }
</script>

<style scoped>
    .audios {
        position: fixed;
        width: 100%;
        top: 0;
        bottom: 0;
    }

    .audios-content {
        height: 90%;
        overflow: hidden;
    }

    .item {
        display: flex;
        box-sizing: border-box;
        align-items: center;
        padding: 5px 20px 5px 20px;
    }

    .active {
        background: #f5f5f5;
        padding: 10px 0 10px 0;
    }

    .icon {
        flex: 0 0 60px;
        width: 60px;
        padding-right: 20px;
    }

    .text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        line-height: 20px;
        overflow: hidden;
        font-size: 14px;
    }

    .name {
        margin-bottom: 10px;
        color: #000;
    }

    .desc {
        color: rgba(0, 0, 0, 0.3);
    }

    .play-status {
        color: red;
    }

    .hidden-btn {
        display: flex;
        align-items: center; /*定义body的元素垂直居中*/
        justify-content: center; /*定义body的里的元素水平居中*/
        height: 100%;
        background-color: #f5f5f5;
    }

    .collected-icon {
        position: absolute;
        right: 2px;
        top: 40%;
        color: gold;
    }

</style>